<template>
  <router-view class="main"></router-view>
  <tabbar v-show="isShowNav" :fixed="false" route active-color="red">
    <tabbar-item icon="home-o" :to="{ name: 'Home' }">首页</tabbar-item>
    <tabbar-item icon="add-o" :to="{ name: 'Send' }">发布</tabbar-item>
    <tabbar-item icon="orders-o" :to="{ name: 'Order' }">订单</tabbar-item>
    <tabbar-item icon="user-circle-o" :to="{ name: 'My' }">我的</tabbar-item>
  </tabbar>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Tabbar, TabbarItem } from 'vant'
import { useRoute } from 'vue-router'
const route = useRoute()

const isShowNav = ref(true)

// watch 监听
//  参数一 表示需要监听的数据
//  参数二 表示回调函数
//    v表示当前被我们监听的数据的最新值
watch(route, (v) => {
  if (v.meta.hideNav) {
    isShowNav.value = false
  } else {
    isShowNav.value = true
  }
})
</script>

<style scoped></style>
